<template>
  <div class="wrapper">
    <div class="top">
      <a-space>
        <a-input-search v-model="keywordT" allowClear placeholder="自定义模板名称" style="width: 200px" @search="loadTemps" />
        <a-input-search v-model="keywordU" allowClear placeholder="编辑人名称" style="width: 200px" @search="loadTemps" />
      </a-space>
      <a-button v-if="permissions_dycl.includes('dycl:dycl.dyclTemplate:add')" type="primary" @click="goAdd">
        <a-icon type="plus"></a-icon>
        新增模板
      </a-button>
    </div>
    <div class="title">默认模板</div>
    <a-row :gutter="24">
      <a-col v-for="li in defaultLst" :key="li.id" :span="6">
        <TempItem :dataSource="li" :isDefault="true" @reload="loadTemps" />
      </a-col>
    </a-row>
    <div class="title">自定义模板</div>
    <a-row :gutter="24">
      <a-col v-for="li in customLst" :key="li.id" :span="6">
        <TempItem :dataSource="li" @reload="loadTemps" />
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { selectSiteDefaultTemplateReq, selectCustomTemplatePageReq } from "./api";
import TempItem from "../components/tempItem";
import { mapGetters } from "vuex";
export default {
  name: "",
  components: { TempItem },
  mixins: [],
  props: {},
  data() {
    return {
      keywordT: "",
      keywordU: "",
      defaultLst: [],
      customLst: []
    };
  },
  computed: {
    ...mapGetters(["permissions_dycl"])
  },
  watch: {},
  created() {},
  mounted() {
    this.loadTemps();
  },
  methods: {
    goAdd() {
      this.$router.push({
        path: "/daiyuchuli/templates/create"
      });
    },
    loadTemps() {
      selectSiteDefaultTemplateReq()
        .then((res) => {
          if (res && res.data) {
            this.defaultLst = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
      selectCustomTemplatePageReq(this.keywordT, this.keywordU)
        .then((res) => {
          if (res && res.data) {
            this.customLst = res.data.entities;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  background: #fff;
  padding: 24px;
  border-radius: 4px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin-bottom: 24px;
}
</style>
